/**
 * 一审决策详情
 */
import * as React from 'react'
import { Card, Form, Button, message, Table } from 'antd'
import Authentication from '../../router/Authentication'
import { FormComponentProps } from 'antd/lib/form/Form'
import { PageHeaderLayout, DescriptionList, Description, Zmage } from '../../components'
import { get, SUBMIT_RESOLVE } from '../../service/api'
import '../../assets/style/detail.less'
export interface Props{
  record: any []
  sample: any
  sampleImgs: any
  sampleScore: any []
  history: any
  roleScore: any []
}

@Authentication
class OneResolveDetail extends React.Component<Props & FormComponentProps, any> {

  state = {
    list: [],
    marks: []
  }

  componentWillReceiveProps (nextProps: Props & FormComponentProps) {
    const { sampleScore } = nextProps
    const { list } = this.state
    if(JSON.stringify(list) !== JSON.stringify(sampleScore)){
      this.setState({
        ...this.state,
        list: sampleScore
      })
    }
  }

  handleOp = (flag: number) => {
    const { history, sample } = this.props
    get(SUBMIT_RESOLVE, { sampleId:sample.sampleId,flag }).then((res: any) => {
      if (res.code == '1') {
        message.success('操作成功！')
        history.goBack()
      }else {
        message.error(res.errMsg)
      }
    })
  }
  handleChange = (id: string, e: any) => {
    const { list } = this.state
    const newList = list
    newList.map((row: any) => {
      if(row.Id == id) {
        row.value = e.target.value
        return
      }
    })
    this.setState({
      list: newList
    })
  }
  render () {
    const { sampleImgs, sample, history, sampleScore, roleScore } = this.props
    const { list } = this.state

    const getImgs = () => {
      let imgs = []
      if(sampleImgs) {
        if(sampleImgs.limg1) imgs.push(sampleImgs.limg1)
        if(sampleImgs.limg2) imgs.push(sampleImgs.limg2)
        if(sampleImgs.limg3) imgs.push(sampleImgs.limg3)
        if(sampleImgs.limg4) imgs.push(sampleImgs.limg4)
        if(sampleImgs.limg5) imgs.push(sampleImgs.limg5)
      }
      return imgs
    }
    const columns: any [] = [
      {
        title: '序号',
        dataIndex: 'scoreid',
        key: 'scoreid',
      },{
        title: '打分项',
        dataIndex: 'scorename',
        key: 'scorename',
      },{
        title: '总分值',
        dataIndex: 'value',
        key: 'value'
      },{
        title: '打分人数',
        dataIndex: 'persum',
        key: 'persum'
      },{
        title: '平均分',
        dataIndex: 'valueavg',
        key: 'valueavg'
      }
    ]
    let totalZxd = 0
    const tableFooter = () => {
      const liStyle: any = {
        listStyle: "none",
        // width: "20%",
        float: "left",
        // textAlign: 'center'
      }
      let totalMd = 0 
      let totalZc = 0
      sampleScore.map((row: any) => {
        totalMd+=row.value
        totalZc=row.persum
        totalZxd+=row.valueavg
      }) 
      return (
        <ul style={{padding: "0"}}>
          <li style={{...liStyle, width: "14.2%",}}>&nbsp;</li>
          <li style={{...liStyle, fontWeight: "bold", width: "30.5%"}}>总计</li>
          <li style={{...liStyle, paddingLeft: "12px", width: "18.2%"}}>{totalMd}</li>
          <li style={{...liStyle, width: "21%" }}>{totalZc}</li>
          <li style={{...liStyle, width: "5" }}>{totalZxd}</li>
        </ul>
      )
    }
    return (
      <PageHeaderLayout 
        title = "">
        <Card bordered  title="基本资料">
          <DescriptionList size="large" title="样衣图片" style={{ marginBottom: 32 }}>
            <Description term="" style={{width: "100%"}}>
              {getImgs().map((img: string, index: number) => (
                <Zmage key={index} className="yy-img" src={img} />
              ))}
            </Description>
          </DescriptionList>
          <DescriptionList size="large" title="样衣信息" style={{ marginBottom: 32 }}>
            <Description term="样衣编码">{sample.sampleId}</Description>
            <Description term="波段号">{sample.bandname}</Description>
            <Description term="大类">{sample.dlText}</Description>
            <Description term="小小类">{sample.xlText}</Description>
            <Description term="供应商货号">{sample.pcode}</Description>
            <Description term="合作方式">{sample.jyfs}</Description>
            <Description term="供应商编码">{sample.supplierid}</Description>
          </DescriptionList>
        </Card>
        <Card bordered style = {{marginTop: "20px"}} title="得分数据">
          <Table 
            rowKey="scoreid"
            columns = {columns}
            dataSource = {list || []}
            pagination = {false}
            footer={tableFooter}
          />
        </Card>
        <Card bordered  title="角色打分情况" style={{ marginBottom: 32 }}>
          <DescriptionList size="large" title="" style={{ marginBottom: 32 }}>
            {roleScore.map((row: any) => <Description term={row.rolename}>{row.VALUE}分</Description>)}
            <Description term="平均分">{totalZxd}</Description>
          </DescriptionList>
          <div style={{textAlign: 'center',marginTop:"20px"}}>
            <Button type="primary" onClick={() => this.handleOp(2)}>通过</Button>&nbsp;
            <Button type="primary" onClick={() => this.handleOp(3)}>淘汰</Button>&nbsp;
            <Button type="primary" onClick={() => this.handleOp(1)}>备选</Button>&nbsp;
            <Button type="primary" onClick={() => this.handleOp(4)}>复版</Button>&nbsp;
            <Button onClick={() => {history.goBack()}}>返回</Button>
          </div>
        </Card>
        
      </PageHeaderLayout>
    )
  }
}
export default Form.create()(OneResolveDetail)
